export default {
    data() {
        return {
            dom: '', ////复制拖动元素dom
            domIndex: '', ////拖动元素index
            fatherSon: '',
            timeIndex: 0, ////记录在目标元素上停留的时间
            setTime: '', ////循环时间
            myArray: [
                {
                    name: '上面',
                    nav: [
                        {
                            navv: '1.上面'
                        },
                        {
                            navv: '2.上面'
                        }
                    ]
                },
                {
                    name: '中间',
                    nav: [
                        {
                            navv: '1.中间'
                        },
                        {
                            navv: '2.中间'
                        }
                    ]
                },
                {
                    name: '下面',
                    nav: [
                        {
                            navv: '1.下面'
                        },
                        {
                            navv: '2.下面'
                        }
                    ]
                }
            ]
        }
    },
    // components: {
    //     draggable
    // },
    methods: {
        lail() {
            console.log(this.myArray)
        },
        //定时器记录悬停时间
        timedCount() {
            var self = this
            this.timeIndex = this.timeIndex + 1
            this.setTime = setTimeout(() => {
                self.timedCount()
            }, 1000)
        },
        //清除定时器
        stopCount() {
            clearTimeout(this.setTime)
        },
        //停留合并
        stopMerger(index) {
            if (this.fatherSon.person === '一级') {
                //父级没子集
                if (
                    this.myArray[this.domIndex].nav === undefined ||
                    this.myArray[this.domIndex].nav.lenght === 0
                ) {
                    this.myArray[index].nav = [{ navv: this.dom.name }]
                    //删除拖动的li
                    this.myArray.splice(this.domIndex, 1)
                    return
                }
                //父级有子集
                let mergeArray = this.myArray[this.domIndex].nav
                mergeArray.splice(0, 0, { navv: this.myArray[this.domIndex].name })
                this.myArray[index].nav = mergeArray
                return
            }
            //子集
            if (this.fatherSon.person === '二级') {
                this.myArray[this.domIndex].nav.splice(this.fatherSon.childrenIndex, 1) ////删除拖动的li
                this.myArray.splice(index, 0, this.dom) ////在目标元素后面添加li
                return
            }
        },
        //拖动源父级
        drag(event, index) {
            var fatherSon = {}
            var fatherSon = {
                person: '一级'
            }
            this.fatherSon = fatherSon
            this.dom = this.myArray[index]
            this.domIndex = index ////获取数组的序号
        },
        //拖动源子集
        dragSon(event, childrenIndex, index) {
            // this.dom = event.target;
            var fatherSon = {}
            var fatherSon = {
                person: '二级',
                childrenIndex: childrenIndex,
                childrenLength: this.myArray[index].nav.length
            }
            this.fatherSon = fatherSon
            this.dom = { name: this.myArray[index].nav[childrenIndex].navv }
            this.domIndex = index ////获取数组的序号
        },
        //目标元素父级
        drop(event, index) {
            event.preventDefault()
            //拖动元素是父级
            if (this.fatherSon.person === '一级') {
                if (this.timeIndex > 3) {
                    this.stopMerger(index)
                    this.leave()
                    return
                }
                this.myArray.splice(this.domIndex, 1) ////删除拖动的li
                this.myArray.splice(index, 0, this.dom) ////在目标元素后面添加li
                this.leave()
            }
            //拖动元素是子集
            this.leave()

            if (this.fatherSon.person === '二级') {
                //如果是最后一个子集del子集
                if (this.fatherSon.childrenLength === 1) {
                    delete this.myArray[this.domIndex].nav
                    this.myArray.splice(index, 0, this.dom) ////在目标元素后面添加li
                } else {
                    this.myArray[this.domIndex].nav.splice(
                        this.fatherSon.childrenIndex,
                        1
                    ) ////删除拖动的li
                    this.myArray.splice(index, 0, this.dom) ////在目标元素后面添加li
                }
            }
        },
        //目标元素子集
        dropSon(event, index, childrenIndex) {
            let dom = { navv: this.dom.name }
            if (this.fatherSon.person === '一级') {
                //父级拖到自己子集 return 不发生事件
                if (this.domIndex === index) {
                    return
                }
                //父元素没有子元素
                if (this.myArray[this.domIndex].nav === undefined) {
                    //在目标元素后面添加li
                    this.myArray[index].nav.splice(childrenIndex, 0, {
                        navv: this.myArray[this.domIndex].name
                    })
                    //删除拖动的li
                    this.myArray.splice(this.domIndex, 1)
                    return
                }
                //父元素有子集
                let mergeArray = this.myArray[this.domIndex].nav
                mergeArray.splice(0, 0, { navv: this.myArray[this.domIndex].name })
                this.myArray[index].nav.splice(childrenIndex, 0, ...mergeArray) ////在目标元素后面添加li
                this.myArray.splice(this.domIndex, 1) ////删除拖动的li
                return
            }
            this.myArray[this.domIndex].nav.splice(this.fatherSon.childrenIndex, 1) ////删除拖动的li
            this.myArray[index].nav.splice(childrenIndex, 0, dom) ////在目标元素后面添加li
            this.leave()
        },
        //离开范围取消定时器
        leave() {
            event.preventDefault()
            clearTimeout(this.setTime)
            this.timeIndex = 0
        },
        enterDrop() {
            event.preventDefault()
            this.timedCount()
        },
        //清除默认事件
        allowDrop: function (event) {
            event.preventDefault()
        }
    }
}